<template>
  <div class="result">
    <van-nav-bar
      :title="query.q + '的搜索结果'"
      left-arrow
      @click-left="$router.push('/search')"
    ></van-nav-bar>
    <!-- 搜索列表页
    1：定义api
    2:导入
    3：通过上拉加载调用
       van-list
           v-model
           finished
           finished-text
           @load
               调用接口
               v-model的值改成false
               修改下一次请求的参数
               数据要累加
               判断是否加载完成，如果完成 finished=true
    
     -->
    <div class="content">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="load"
      >
        <van-cell-group>
          <van-cell
            @click="$router.push('/article/' + item.art_id)"
            v-for="(item, index) in list"
            :key="index"
            :title="item.title"
          ></van-cell>
        </van-cell-group>
      </van-list>
    </div>
  </div>
</template>
<script>
import { search } from '@/api/search'
export default {
  data () {
    return {
      loading: false,
      finished: false,
      list: [],
      query: {
        page: 1,
        per_page: 1,
        q: decodeURIComponent(this.$route.params.key)
      }
    }
  },
  methods: {
    async load () {
      const res = await search(this.query)
      this.loading = false
      this.query.page++
      this.list.push(...res.data.data.results)
      if (this.list.length >= res.data.data.total_count) {
        this.finished = true
      }
      //   console.log('返回值', res)
    }
  }
}
</script>
<style lang="less" scoped>
.content {
  position: fixed;
  top: 46px;
  bottom: 0;
  width: 100vw;
  overflow-y: auto;
}
</style>
